<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<h:head>

	</h:head>
	  
	<h:body>
	<h:form id="form">
	<p:growl id="msgs" showDetail="true"/>
    <div class="card">
        <p:dataTable var="item" value="#{dtBasicView.items}"  editable="true" size="small" stripedRows="true">
        
            <p:ajax event="rowEdit" listener="#{dtBasicView.onRowEdit}" update=":form:msgs"/>
            <p:ajax event="rowEditCancel" listener="#{dtBasicView.onRowCancel}" update=":form:msgs"/>
            <p:column headerText="Code">
                <h:outputText value="#{item.id}" />
            </p:column>
              <p:column headerText="Name">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{item.name}"/>
                    </f:facet>
                    <f:facet name="input">
                        <p:inputText label="Name" value="#{item.name}" style="width:100%"/>
                    </f:facet>
                </p:cellEditor>
            </p:column>
            
              <p:column headerText="Category">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{item.category}"/>
                    </f:facet>
                    <f:facet name="input">
                        <p:inputText label="Category" value="#{item.category}" style="width:100%"/>
                    </f:facet>
                </p:cellEditor>
            </p:column>
 
               <p:column headerText="Quantity">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{item.price}"/>
                    </f:facet>
                    <f:facet name="input">
                        <p:inputText label="Price" value="#{item.price}" style="width:100%"/>
                    </f:facet>
                </p:cellEditor>
            </p:column>
       <p:column style="width:6rem">
                <p:rowEditor editTitle="Edit Row" cancelTitle="Cancel Edit" saveTitle="Save Row"/>
            </p:column>
        </p:dataTable>
    </div>
</h:form>
	
	</h:body>
</html>